<template>
	<view class="playout">
		<view class="loadingLayout" v-if="firstLoading">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<navigator class="item" :url="'/pages/preview/preview?id='+item._id" v-for="item in classListData" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		<view class="loadingLayout" v-if="classListData.length || noData">
			<uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>


<script setup>
	import {apiGetClassListData,apiGetHistory} from "@/api/apis.js"
	import {goHome} from "@/utils/common.js"
	
	//获取分类下数据的参数
	let queryParam={
		pageSize:12,
		pageNum:1
	}
	
	//是否第一次加载数据标识
	let firstLoading=ref(true)
	//获取不到数据的标识
	let noData=ref(false)
	//分类下的数据
	const classListData=ref([])
	
	async function getClassListData(){
		let res
		if(queryParam.classid)res=await apiGetClassListData(queryParam)
		if(queryParam.type)res=await apiGetHistory(queryParam)	
		classListData.value=[...classListData.value,...res.data]
		
		//同步缓存数据
		uni.setStorageSync("storageClassList",classListData.value)
		
		uni.stopPullDownRefresh()
		if(res.data.length<queryParam.pageSize)noData.value=true
		firstLoading.value=false
	}
	
	let pageTitle=null
	
	//加载页面时拿到传参
	onLoad((e)=>{
		let {id=null,name=null,type=null}=e
		if(!id && !(name && type))goHome()
		if(type)queryParam.type=type
		if(id)queryParam.classid=id
		uni.setNavigationBarTitle({
			title:name
		})
		pageTitle=name
		getClassListData()
	})
	
	//触底加载更多
	onReachBottom(()=>{
		//如果没有数据了不发送网络请求进行加载
		if(noData.value)return
		queryParam.pageNum++
		getClassListData()
	})
	
	//下拉刷新
	onPullDownRefresh(()=>{
		//重置请求参数
		queryParam.pageNum=1
		//清空页面数据
		classListData.value=[]
		//重置没有数据标识
		noData.value=false
		//重新发送请求
		getClassListData()
	})
	
	//卸载页面时，清除缓存
	onUnload(()=>{
		uni.removeStorageSync("storageClassList")
	})
	
	//分享给好友
	onShareAppMessage((e)=>{
		return {
			title:'贤贤虾壁纸',
			path:'/pages/classlist/classlist?id='+queryParam.classid+'&name='+pageTitle
		}
	})
	
	//分享到朋友圈
	onShareTimeline(()=>{
		return {
			title:'贤贤虾壁纸炒鸡好~',
			query:'id='+queryParam.classid+'&name='+pageTitle
		}
	})
</script>

<style lang="scss" scoped>
	.content{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 5rpx;
		padding: 5rpx;
		.item{
			height: 440rpx;
			image{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
